<template>
  <div class="recommend-back">
    <div class="recommend-contain">
      <ul class="recommend-list">
        <li class="clock">
          <div class="clock-block">
            <img src="./images/clock.png" alt="clock" />
            <h3>今日推荐</h3>
          </div>
        </li>
        <li>
          <img src="./images/today01.png" alt="recomend-1" />
        </li>
        <li>
          <img src="./images/today02.png" alt="recomend-2" />
        </li>
        <li>
          <img src="./images/today03.png" alt="recomend-3" />
        </li>
        <li>
          <img src="./images/today04.png" alt="recomend-4" />
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "Recommend",
};
</script>
<style lang="less" scoped>
.recommend-back {
  width: 1200px;
  margin: 0 auto;
}
.recommend-contain {
  height: 165px;
  background-color: #eaeaea;
  margin: 10px 0;
  .recommend-list {
    display: flex;
    .clock {
      width: 200px;
      background-color: #5c5251;
      color: #fff;
      text-align: center;
      .clock-block {
        padding-top: 30px;
        h3 {
          margin-top: 20px;
          font-weight: bolder;
          font-size: 18px;
        }
      }
    }
    li + li {
      img {
        transition: opacity 400ms;
        &:hover {
          opacity: 0.8;
        }
      }
    }
  }
}
</style>